<template>
    <view class="case-list-container">
        <!-- 页面标题 -->
        <view class="page-title">优秀案例</view>

        <!-- 案例列表 -->
        <view class="case-list">
            <!-- 加载中提示 -->
            <view class="loading" v-if="loading">加载中...</view>

            <!-- 错误提示 -->
            <view class="error" v-else-if="errorMsg">{{ errorMsg }}</view>

            <!-- 案例项 -->
            <view v-for="item in caseList" :key="item.id" class="case-item" @click="goToDetail(item.id)">
                <!-- 图片展示区域 -->
                <view class="case-images" :class="'images-count-' + Math.min(3, item.imageList?.length || 0)">
                    <image 
                        v-for="(img, index) in item.imageList?.slice(0, 3) || []" 
                        :key="index" 
                        :src="img" 
                        class="case-image" 
                        mode="aspectFill"
                    ></image>
                    <!-- 无图片时的占位 -->
                    <view v-if="!item.imageList || item.imageList.length === 0" class="no-image">
                        <text class="no-image-text">暂无图片</text>
                    </view>
                </view>
                <view class="case-info">
                    <view class="case-title">{{ item.title }}</view>
                    <view class="case-introduce">{{ item.introduce }}</view>
                    <view class="case-price">¥{{ item.price?.toFixed(2) || '0.00' }}</view>
                </view>
            </view>
            <!-- 无数据提示 -->
            <view class="no-data" v-if="caseList.length === 0 && !loading && !errorMsg">暂无案例数据</view>
        </view>
    </view>
    <!-- 无数据提示 -->
    <view class="no-data" v-if="caseList.length === 0 && !loading && !errorMsg">暂无案例数据</view>
    <!-- 加载更多提示 -->
    <view class="load-more" v-if="loadingMore">加载更多中...</view>
    <view class="load-more" v-else-if="!hasMore && caseList.length > 0">没有更多数据了</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import request from '@/utils/request';

// 响应式数据
const caseList = ref([]);
const pageNum = ref(1);
const loading = ref(false);
const errorMsg = ref('');
const hasMore = ref(true);
const loadingMore = ref(false);

// 页面加载时会自动调用fetchCaseList

// 获取案例列表数据
const fetchCaseList = async () => {
    try {
        loading.value = true;
        errorMsg.value = '';

        const response = await request('/case/list', {
            data: { pageNum: pageNum.value }
        });

        // 后端返回格式为 { code: 200, data: [] }
        if (response.code === 200) {
            const list = response.data;
            caseList.value = list;
            // 如果返回的数据少于预期的每页数量，说明没有更多数据了
            hasMore.value = list && list.length >= 10;
        } else {
            errorMsg.value = '获取数据失败，请重试';
        }
    } catch (err) {
        errorMsg.value = '网络错误，请检查网络连接';
        console.error('获取案例列表失败:', err);
    } finally {
        loading.value = false;
    }
};



// 滚动加载更多 - 使用uni-app的页面触底事件
const onReachBottom = () => {
    if (!loadingMore.value && hasMore.value) {
        loadMoreData();
    }
};

// 暴露页面触底事件给uni-app
defineExpose({
    onReachBottom
});

// 加载更多数据
const loadMoreData = async () => {
    if (loadingMore.value || !hasMore.value) return;
    
    loadingMore.value = true;
    pageNum.value++;
    
    try {
        const response = await request('/case/list', {
            data: { pageNum: pageNum.value }
        });
        
        if (response.code === 200) {
            const list = response.data;
            if (list && list.length > 0) {
                caseList.value.push(...list);
                // 如果返回的数据少于预期的每页数量，说明没有更多数据了
                hasMore.value = list.length >= 10;
            } else {
                hasMore.value = false;
            }
        } else {
            pageNum.value--; // 恢复页码
            errorMsg.value = '加载更多失败，请重试';
        }
    } catch (err) {
        pageNum.value--; // 恢复页码
        errorMsg.value = '网络错误，加载更多失败';
        console.error('加载更多案例失败:', err);
    } finally {
        loadingMore.value = false;
    }
};

// 页面挂载时获取数据
onMounted(() => {
    fetchCaseList();
});

// 跳转到案例详情页
const goToDetail = (id) => {
    uni.navigateTo({
        url: `/pages/index/case-detail?id=${id}`
    });
};
</script>

<style lang="scss" scoped>
.case-list-container {
    min-height: 100vh;
    padding: 40rpx 20rpx;
    background: linear-gradient(135deg, #18122B 0%, #120C1C 100%);
}

.page-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #A259FF;
    text-align: center;
    margin: 20rpx 0 60rpx 0;
    letter-spacing: 2rpx;
}

.case-list {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
}

.case-item {
    background: linear-gradient(135deg, #221A36 0%, #18122B 100%);
    border-radius: 18rpx;
    box-shadow: 0 4rpx 16rpx #7B2FF244;
    border: 1px solid #2D1457;
    transition: transform 0.2s;
    overflow: hidden;
}

.case-item:active {
    transform: scale(0.98);
}

.case-info {
    padding: 20rpx 30rpx 30rpx;
}

/* 图片展示区域 */
.case-images {
    width: 100%;
    display: flex;
    height: 240rpx;
}

/* 根据图片数量调整布局 */
.images-count-1 .case-image {
    width: 100%;
}

.images-count-2 .case-image {
    width: 50%;
}

.images-count-3 .case-image {
    width: 33.33%;
}

.case-image {
    height: 100%;
    object-fit: cover;
}

/* 无图片占位 */
.no-image {
    width: 100%;
    height: 100%;
    background: rgba(45, 20, 87, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}

.no-image-text {
    color: #B8B8D1;
    font-size: 28rpx;
}

.case-title {
    font-size: 32rpx;
    color: #fff;
    font-weight: 500;
    margin-bottom: 16rpx;
    margin-top: 10rpx;
}

.case-introduce {
    font-size: 26rpx;
    color: #B8B8D1;
    margin-bottom: 20rpx;
    line-height: 1.5;
    /* 最多显示两行 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.case-price {
    font-size: 30rpx;
    color: #A259FF;
    font-weight: bold;
}

.loading,
.no-data,
.error {
    text-align: center;
    font-size: 28rpx;
    color: #B8B8D1;
    padding: 100rpx 0;
}

.error {
    color: #ff4d4f;
}

.load-more {
    text-align: center;
    font-size: 28rpx;
    color: #B8B8D1;
    padding: 30rpx 0;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30rpx;
    margin-top: 60rpx;
}

.page-btn {
    width: 140rpx;
    height: 60rpx;
    background: linear-gradient(135deg, #221A36 0%, #18122B 0%);
    border: 1px solid #2D1457;
    border-radius: 30rpx;
    color: #fff;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-info {
    font-size: 28rpx;
    color: #B8B8D1;
}
</style>